import React, { Component } from "react"
import NewsInfo from "../../components/NewsInfo"
import s from "./search.module.css"

const searchIcon = (
  <svg
    style={{ verticalAlign: "middle" }}
    width="21"
    height="21"
    viewBox="0 0 21 21"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect opacity="0.01" width="21" height="21" fill="black" />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M9.19905 16.47C5.22164 16.47 1.98572 13.2173 1.98572 9.21938C1.98572 5.22142 5.22164 1.96875 9.19905 1.96875C13.1765 1.96875 16.4124 5.2214 16.4124 9.21936C16.4124 11.0143 15.7602 12.6589 14.6814 13.9265L14.4026 13.652L13.555 14.4904L13.8372 14.7683C12.5823 15.8298 10.9637 16.47 9.19905 16.47ZM13.8372 14.7683L18.1667 19.0311L19.0142 18.1927L14.6814 13.9265C14.4234 14.2297 14.1409 14.5113 13.8372 14.7683ZM9.19905 2.98574C5.77946 2.98574 2.99748 5.7821 2.99748 9.21935C2.99748 12.6566 5.77944 15.453 9.19905 15.453C12.6187 15.453 15.4006 12.6566 15.4006 9.21935C15.4006 5.7821 12.6187 2.98574 9.19905 2.98574Z"
      fill="#69AB42"
    />
  </svg>
)

const nullIcon = (
  <svg
    width="112"
    height="76"
    viewBox="0 0 112 76"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M72.4036 72.5109L54.8019 54.7815C49.5517 60.2619 42.2037 63.6293 34.0591 63.7423C17.5905 63.9683 3.93766 50.3859 3.97132 33.7977C4.00497 17.3 17.2427 3.98884 33.6328 3.98884C50.0453 3.98884 63.2943 17.3339 63.2943 33.8656C63.2943 39.3234 61.8135 44.4535 59.2893 48.9395C58.863 49.7079 58.9976 50.6571 59.6146 51.2786C60.5121 52.1825 62.0154 51.9905 62.6661 50.8831C65.5828 45.9338 67.2432 40.1256 67.2432 33.8656C67.2432 15.1418 52.2105 0 33.6216 0C15.0215 0 0 15.1305 0 33.8656C0 52.5893 15.0327 67.7311 33.6216 67.7311C41.5306 67.7311 48.845 64.94 54.5888 60.3636L69.5429 75.4037C70.3507 76.2173 71.6744 76.1947 72.4597 75.3585C73.2001 74.5449 73.1777 73.2906 72.4036 72.5109Z"
      fill="#707070"
    />
    <path
      d="M15.0129 31.2872C16.1779 22.0411 23.7387 14.7874 33.1726 13.9479C34.2119 13.8583 35 13.0076 35 11.9778C35 10.8136 33.9835 9.90691 32.8071 10.0077C21.4887 11.0151 12.4089 19.7239 11.0155 30.7835C10.867 31.9588 11.8036 32.9999 13.0142 32.9999C14.0307 33.0111 14.8987 32.2723 15.0129 31.2872Z"
      fill="#69AB42"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M83.5 76C84.8807 76 86 74.8807 86 73.5C86 72.1193 84.8807 71 83.5 71C82.1193 71 81 72.1193 81 73.5C81 74.8807 82.1193 76 83.5 76Z"
      fill="#707070"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M96.5 76C97.8807 76 99 74.8807 99 73.5C99 72.1193 97.8807 71 96.5 71C95.1193 71 94 72.1193 94 73.5C94 74.8807 95.1193 76 96.5 76Z"
      fill="#707070"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M109.5 76C110.881 76 112 74.8807 112 73.5C112 72.1193 110.881 71 109.5 71C108.119 71 107 72.1193 107 73.5C107 74.8807 108.119 76 109.5 76Z"
      fill="#707070"
    />
  </svg>
)

export default class SearchResult extends Component {
  render() {
    const { searchResult, className } = this.props

    return (
      <div className={className}>
        <div className={s.res}>
          <div className={s.typeTitle}>搜索结果</div>

          {this.props.searchResult.length > 0 && (
            <div className={s.desc}>
              <span>{searchIcon}</span>
              含"<span className={s.highLight}>{this.props.searchText}</span>
              "的搜索结果约
              {this.props.searchResult.length}条
            </div>
          )}
        </div>
        {this.props.searchResult.length === 0 ? (
          <div className={s.nullBox}>
            <div>{nullIcon}</div>
            <div>
              抱歉，没有找到与关键词“
              <span className={s.highLight}>{this.props.searchText}</span>
              ”相关的内容
            </div>
          </div>
        ) : (
          <div className={s.newsList}>
            {searchResult.map(node => (
              <NewsInfo key={node.mongodb_id || node.id} newsInfo={node} />
            ))}
          </div>
        )}
      </div>
    )
  }
}
